<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common_head :: commonHead('用户管理')"></head>
<body>
<div class="page-content" id="app">
    <div class="row animated fadeInRight">
        <div class="col-md-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="m-b-xs">
                        <form class="form-horizontal row">
                            <div class="form-group pull-left">
                                <label class="label-key">用户姓名：</label>
                                <input type="text" class="form-control inp-nor" v-model="username" placeholder="请输入用户名或姓名"/>
                            </div>
                            <div class="pull-right btn-box" style="margin-right: 4px;">
                                <a class="btn btn-default" @click="callback(1)">
                                    <i class="fa fa-search"></i>
                                    搜索
                                </a>
                                <a class="btn btn-default" @click="add()">
                                    <i class="fa fa-user-plus"></i>
                                    增加
                                </a>
                                <a class="btn btn-default" @click="del()">
                                    <i class="fa fa-user-times"></i>
                                    删除
                                </a>
                            </div>
                        </form>
                    </div>
                    <div class="table-box">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th style="text-align: center;width: 40px;">
                                    <input type="checkbox" @click="selectBox('chenkbox','all')"/>
                                </th>
                                <th>用户名</th>
                                <th>姓名</th>
                                <th>手机</th>
                                <th>角色</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody  v-cloak>
                                <tr  v-for="li in rsList">
                                    <td  style="text-align: center;">
                                        <input type="checkbox" name="chenkbox" :value="li.id" @click="selectBox('chenkbox','one')"/>
                                    </td>
                                    <td>{{li.username}}</td>
                                    <td>{{li.name}}</td>
                                    <td>{{li.telephone}}</td>
                                    <td>{{li.roleName}}</td>
                                    <td>
                                        <span v-if="li.status==0">
                                            启用
                                        </span>
                                        <span v-if="li.status==1">
                                            停用
                                        </span>
                                    </td>
                                    <td>
                                        <a @click="auth(li.id)">
                                            <span style="color: red;" v-if="li.sum==0">
                                                <i class="fa fa-street-view"> 授权</i>
                                            </span>
                                             <span  v-if="li.sum>0">
                                                <i class="fa fa-street-view"> 授权</i>
                                            </span>
                                        </a>
                                        <a @click="modify(li.id)">
                                            <i class="fa fa-pencil"> 修改</i>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <vue-page v-bind:pager-data="pagerData" :callback="callback"></vue-page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="common/onload_js :: onloadJs"></div>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            username:"",
            rsList: [],
            pagerData: {
                page: {
                    //分页大小
                    pageSize: 10,
                    //分页数
                    arrPageSize: [10, 20, 30, 40, 50],
                    //当前页面
                    pageNum: 1,
                    //总分页数
                    pages: 0,
                    //记录总数
                    total: 0
                }
            }
        },
        created: function () {
            this.callback(1);
        },
        components:{
            'vue-page': vuePage
        },
        methods: {
            callback: function (page) {
                this.pagerData.page.pageNum = page;
                var params = {};
                params.username = this.username;
                params.pageNum = page;
                params.pageSize = this.pagerData.page.pageSize;
                ajaxDataController().post("/user/getUserPageList",params,function(data){
                    if(data.status==200){
                        var resultObject = data.resultObject;
                        vue.rsList = resultObject.list;
                        vue.pagerData.page.pages = resultObject.pages;
                        vue.pagerData.page.total = resultObject.total;
                    }
                });
            },
            auth:function(userId){
                common.layer.open("/sys/goPage?herf=/sys/UserAuth&userId="+userId,"授权",350,400)
            },
            add:function(){
                common.layer.open("/sys/goPage?herf=/sys/UserAdd","添加",800,300)
            },
            modify:function(userId){
                common.layer.open("/sys/goPage?herf=/sys/UserModify&id="+userId,"修改",800,300)
            },
            del:function(){
                if(this.checkValues==''||this.checkValues==null){
                    common.layer.fail("请选择一条记录!");
                }else{
                    ajaxDataController().post("/user/delUser",{ids:this.checkValues},function(data) {
                        if (data.status == 200) {
                            common.layer.success("删除成功!",function(){
                               vue.callback(1);
                            });
                        }
                    });
                }
            }
        }
    });

</script>
</body>
</html>
